import { defineComponent, reactive, toRefs, computed } from "vue"
import { inject } from "vue"

import BodyTd from "./body-td"
import { EMIT_EVENTS, COMPS_CUSTOM_ATTRS } from "../util/constant"
import VueDomResizeObserver from "amtf/components/resize-observer"

import emitter from "amtf/utils/emitter"
import { useEmitter } from "amtf/hooks"

import { use样式 } from "amtf/hooks"
import { isEmptyValue, getValByUnit, 拼组件名, isFunction, isBoolean, getRandomId } from "amtf/utils"
const 主名 = "table-body-tr"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,
    props: {
        rowData: {
            type: Object,
            required: true,
        },
        rowIndex: {
            type: Number,
            required: true,
        },
        colgroups: {
            type: Array,
            required: true,
        },
        columnCollection: {
            type: Object,
            required: true,
        },
        rowKeyFieldName: {
            type: String,
            default: null,
        },
        allRowKeys: {
            type: Array,
            required: true,
        },
        // expand row option
        expandOption: {
            type: Object,
            default: () => null,
        },
        // is expand row
        isExpandRow: {
            type: Boolean,
            required: true,
        },
        // expanded row keys
        expandedRowkeys: {
            type: Array,
            default: () => [],
        },
        // expand row change
        expandRowChange: {
            type: Function,
            default: null,
        },
        // checkbox option
        checkboxOption: {
            type: Object,
            default: () => null,
        },
        internalCheckboxSelectedRowKeys: {
            type: Array,
            default: () => null,
        },
        // radio option
        radioOption: {
            type: Object,
            default: () => null,
        },
        internalRadioSelectedRowKey: {
            type: [String, Number],
            default: null,
        },
        // is virtual scroll
        isVirtualScroll: {
            type: Boolean,
            default: false,
        },
        // cell style option
        cellStyleOption: {
            type: Object,
            default: () => null,
        },
        // highlight row key
        highlightRowKey: {
            type: [String, Number],
            default: null,
        },
        // event custom option
        eventCustomOption: {
            type: Object,
            default: () => null,
        },
        // cell selection data
        cellSelectionData: {
            type: Object,
            default: () => null,
        },
        // cell selection range data
        cellSelectionRangeData: {
            type: Object,
            default: () => null,
        },
        bodyIndicatorRowKeys: {
            type: Object,
            default: () => null,
        },
        // cell span option
        cellSpanOption: {
            type: Object,
            default: () => null,
        },
        // edit opttion
        editOption: {
            type: Object,
            default: () => null,
        },
    },
    setup(props) {
        // console.log(`body-tr props 👉`, props)
        const { dispatch } = useEmitter(inject("表格id"))
        const { dispatch: dispatchBody } = useEmitter(inject("bodyid"))
        const { 拼样式名_table直属 } = use样式(主名)

        const currentRowKey = computed(() => {
            const { rowKeyFieldName } = props
            // console.log(`rowKeyFieldName 👉`, rowKeyFieldName)
            return rowKeyFieldName ? props.rowData[rowKeyFieldName] : null
        })

        const trClass = computed(() => {
            // console.log(`trClass computed ing👇`)
            let result = null
            const { highlightRowKey } = props
            // console.log(`highlightRowKey 👉`, highlightRowKey)
            let isHighlight = false
            if (!isEmptyValue(highlightRowKey)) {
                if (highlightRowKey === currentRowKey.value) {
                    isHighlight = true
                }
                // isHighlight = true
            }
            result = {
                [拼样式名_table直属("body-tr")]: true,
                [拼样式名_table直属("tr-highlight")]: isHighlight,
            }
            // console.log(`result 👉`,result)
            return result
        })

        function rowClick(e, fn) {
            fn && fn(e)
            const { rowData, rowIndex } = props
            dispatchBody(EMIT_EVENTS.BODY_ROW_CLICK, {
                rowData,
                rowIndex,
            })
        }

        function rowDblclick(e, fn) {
            fn && fn(e)
        }

        function rowContextmenu(e, fn) {
            fn && fn(e)
        }

        function rowMouseenter(e, fn) {
            fn && fn(e)
        }

        function rowMouseleave(e, fn) {
            fn && fn(e)
        }

        function rowMousemove(e, fn) {
            fn && fn(e)
        }

        function rowMouseover(e, fn) {
            fn && fn(e)
        }

        function rowMousedown(e, fn) {
            fn && fn(e)
        }

        function rowMouseup(e, fn) {
            fn && fn(e)
        }

        const getTdContent = () => {
            // console.log(`props.colgroups 👉`, props.colgroups)
            return props.colgroups.map(column => (
                <BodyTd
                    key={column.key}
                    {...{
                        rowIndex: props.rowIndex,
                        rowData: props.rowData,
                        column: column,
                        columnCollection: props.columnCollection,
                        colgroups: props.colgroups,
                        expandOption: props.expandOption,
                        expandedRowkeys: props.expandedRowkeys,
                        checkboxOption: props.checkboxOption,
                        rowKeyFieldName: props.rowKeyFieldName,
                        allRowKeys: props.allRowKeys,
                        isExpandRow: props.isExpandRow,
                        internalCheckboxSelectedRowKeys: props.internalCheckboxSelectedRowKeys,
                        internalRadioSelectedRowKey: props.internalRadioSelectedRowKey,
                        radioOption: props.radioOption,
                        cellStyleOption: props.cellStyleOption,
                        cellSpanOption: props.cellSpanOption,
                        eventCustomOption: props.eventCustomOption,
                        cellSelectionData: props.cellSelectionData,
                        cellSelectionRangeData: props.cellSelectionRangeData,
                        bodyIndicatorRowKeys: props.bodyIndicatorRowKeys,
                        editOption: props.editOption,
                    }}
                    onExpandRowChange={() => expandRowChange(props.rowData, props.rowIndex)}
                />
            ))
        }
        // custom on row event
        let customEvents = {}
        if (props.eventCustomOption) {
            const { bodyRowEvents } = props.eventCustomOption
            customEvents = bodyRowEvents ? bodyRowEvents({ row: props.rowData, rowIndex: props.rowIndex }) : {}
        }

        const events = {
            onClick: e => rowClick(e, customEvents.click),
            onDblclick: e => rowDblclick(e, customEvents.dblclick),
            onContextmenu: e => rowContextmenu(e, customEvents.contextmenu),
            onMouseenter: e => rowMouseenter(e, customEvents.mouseenter),
            onMouseleave: e => rowMouseleave(e, customEvents.mouseleave),
            onMousemove: e => rowMousemove(e, customEvents.mousemove),
            onMouseover: e => rowMouseover(e, customEvents.mouseover),
            onMousedown: e => rowMousedown(e, customEvents.mousedown),
            onMouseup: e => rowMouseup(e, customEvents.mouseup),
        }

        return () => {
            let result = null
            if (props.isVirtualScroll) {
                result = (
                    <VueDomResizeObserver
                        key={currentRowKey.value}
                        {...{
                            tagName: "tr",
                            id: currentRowKey.value,
                            [COMPS_CUSTOM_ATTRS.BODY_ROW_KEY]: currentRowKey.value,
                        }}
                        onExpandRowChange={({ key, height }) => {
                            dispatch(EMIT_EVENTS.BODY_ROW_HEIGHT_CHANGE, {
                                rowKey: key,
                                height,
                            })
                        }}
                        {...events}>
                        {getTdContent()}
                    </VueDomResizeObserver>
                )
            } else {
                result = (
                    <tr
                        key={currentRowKey.value}
                        class={trClass.value}
                        {...{
                            [COMPS_CUSTOM_ATTRS.BODY_ROW_KEY]: currentRowKey.value,
                        }}
                        {...events}>
                        {getTdContent()}
                        {/* <span>props.highlightRowKey:{props.highlightRowKey}</span> */}
                    </tr>
                )
            }
            return result
        }
    },
})
